<!--表格组件-列设置组件-->
<template>
  <el-dialog destroy-on-close v-model="modelValue" title="列配置" width="50vw">
    <el-row>
      <el-col :span="4">
        <span>功能列配置</span>
      </el-col>
      <el-col :span="20">
        <el-select v-model="pickColumn" :placeholder="$t('基础文本.请选择')" multiple clearable>
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <!--<el-table :data="fixedColumns" size="small" border>
      <el-table-column label="功能列" align="center" width="180" />
      <el-table-column label="是否显示" align="center" width="80">
        <template #default="{ row }">
          <el-switch size="small" v-model="row.isShow" />
        </template>
      </el-table-column>
    </el-table>-->

    <el-table :data="rightDataList" size="small" height="500">
      <el-table-column prop="label" label="列名" width="180" align="center" />
      <el-table-column prop="config" label="配置" align="center">
        <el-table-column label="列宽（px）" align="center" min-width="300">
          <template #default="{ row }">
            <el-input-number
              placeholder="该列宽度"
              size="small"
              :min="0"
              style="width: 100%"
              v-model="row.width"
            />
            <!--<el-row style="align-items: center; margin-bottom: 10px">
              <el-col :span="6" style="text-align: left">列宽</el-col>
              <el-col :span="18">
                <el-input-number
                  placeholder="该列宽度"
                  size="small"
                  style="width: 100%"
                  v-model="row.width"
                />
              </el-col>
            </el-row>
            <el-row style="align-items: center">
              <el-col :span="6" style="text-align: left">最小列宽</el-col>
              <el-col :span="18">
                <el-input-number
                  placeholder="该列宽度不会低于设定的值"
                  size="small"
                  style="width: 100%"
                  v-model="row.minWidth"
                />
              </el-col>
            </el-row>-->
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="80">
          <template #default="{ row }">
            <el-switch size="small" v-model="row.sortable" />
          </template>
        </el-table-column>
        <!--<el-table-column label="内部搜索" align="center" min-width="100">
          <template #header>
            内部搜索
            <el-tooltip
              content="开启前端分页时，该列数据是否可在右上的搜索框搜索出来"
              effect="dark"
              placement="top"
            >
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
          <template #default="{ row }">
            <el-switch size="small" v-model="row.search" />
          </template>
        </el-table-column>-->
        <el-table-column label="固定列" align="center">
          <template #default="{ row }">
            <el-select
              v-model="row.fixed"
              size="small"
              :placeholder="$t('基础文本.请选择')"
              clearable
            >
              <el-option label="left" value="left" />
              <el-option label="right" value="right" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="数据过滤" align="center">
          <template #default="{ row }">
            <el-select
              v-model="row.filter"
              size="small"
              :placeholder="$t('基础文本.请选择')"
              clearable
            >
              <el-option label="input" value="input" />
              <el-option label="select" value="select" />
              <el-option label="date" value="date" />
            </el-select>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
const modelValue = defineModel(); //弹窗是否显示
const pickColumn = defineModel('pickColumn'); //显示的功能列
const rightDataList = defineModel('rightDataList'); //显示的列
//功能列下拉列表
const selectList = ref([
  {
    value: 'selection',
    label: '复选框',
  },
  {
    value: 'radio',
    label: '单选框',
  },
  {
    value: 'expand',
    label: '展开列',
  },
  {
    value: 'index',
    label: '序号',
  },
  {
    value: 'drag',
    label: '拖拽',
  },
]);
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 14px;
}
</style>
